<template>
  <div class="update-photo">
    <img class="img" :src="img" ref="img" />
    <div class="toolbar">
      <div class="cancel" @click="$emit('close')">取消</div>
      <div class="confirm" @click="onConfirm">完成</div>
    </div>
  </div>
</template>
<script>
// import "cropperjs/dist/cropper.css";
// import Cropper from "cropperjs";
// import { updateUserPhoto } from '@/api/user.js'
import { updataUser } from "@/api/user";
import COS from "cos-js-sdk-v5";
export default {
  name: "UpdatePhoto",
  data() {
    return {
      cropper: null,
    };
  },
  props: {
    img: {
      type: [String, Object],
      required: true,
    },
    files: {
      type: [Object, Array, String, File],
    },
    id: {
      type: [String, Number],
    },
  },
  mounted() {
    // const image = this.$refs.img;
    // this.cropper = new Cropper(image, {
    //   viewMode: 1,
    //   dragMode: "move",
    //   aspectRatio: 1,
    //   autoCropArea: 1,
    //   cropBoxMovable: false,
    //   cropBoxResizable: false,
    //   background: false,
    //   movable: true,
    // });
  },
  methods: {
    onConfirm() {
      this.$toast.loading({
        message: "保存中...",
        forbidClick: true, // 禁止背景点击
        duration: 0, // 持续展示
      });
      const cos = new COS({
        SecretId: "AKIDAHE3nQwJTQx7HUfhZFouvs591pbGwbBe",
        SecretKey: "VvHYhqrejdP2TgkiZJuTxPsJg1IbuBOV",
      });
      // 执行上传操作
      cos.putObject(
        {
          Bucket: "zhongtai-1312798478", // 存储桶
          Region: "ap-guangzhou", // 地域
          Key: this.files.name, // 文件名
          Body: this.files, // 要上传的文件对象
          StorageClass: "STANDARD", // 上传的模式类型 直接默认 标准模式即可
          // onProgress: (params) => {
          //   this.percent = params.percent * 100;
          // },
          // 上传到腾讯云 =》 哪个存储桶 哪个地域的存储桶 文件  格式  名称 回调
        },
        async (err, data) => {
          // data返回数据之后 应该如何处理

          // debugger;
          // data中有一个statusCode === 200 的时候说明上传成功
          if (!err && data.statusCode === 200) {
            //   此时说明文件上传成功  要获取成功的返回地址
            // fileList才能显示到上传组件上 此时我们要将fileList中的数据的url地址变成 现在上传成功的地址
            // 目前虽然是一张图片 但是请注意 我们的fileList是一个数组
            // 需要知道当前上传成功的是哪一张图片
            // 去找谁的uid等于刚刚记录下来的id
            // 将成功的地址赋值给原来的url属性
            // console.log("http://" + data.Location);
            // return "http://" + data.Location;
            try {
              await updataUser({
                id: this.id,
                touxiang: "http://" + data.Location,
              });

              this.$parent.$parent.getUserInfo();
              this.$emit("close");
              this.$toast.success("更新成功");
            } catch (error) {
              this.$toast.fail("更新失败");
            }
            // upload 为true 表示这张图片已经上传完毕 这个属性要为我们后期应用的时候做标记
            // 保存  => 图片有大有小 => 上传速度有快又慢 =>要根据有没有upload这个标记来决定是否去保存
            // 将上传成功的地址 回写到了fileList中 fileList变化  =》 upload组件 就会根据fileList的变化而去渲染视图
            // this.showPercent = false; // 隐藏进度条
            // this.percent = 0; // 进度归0
          }
        }
      );
    },
    // onConfirm() {
    //   // 基于服务端的裁切使用 getData 方法获取裁切参数
    //   // console.log(this.cropper.getData())
    //   // 纯客户端的裁切使用 getCroppedCanvas 获取裁切的文件对象
    //   this.cropper.getCroppedCanvas().toBlob((blob) => {
    //     this.updatePhoto(blob);
    //   });
    // },
    // async updatePhoto(blob) {
    //   this.$toast.loading({
    //     message: "保存中...",
    //     forbidClick: true, // 禁止背景点击
    //     duration: 0, // 持续展示
    //   });
    //   try {
    //     const formData = new FormData();
    //     formData.append("photo", blob);
    //     // const { data } = await updateUserPhoto(formData);
    //     this.$emit("close");
    //     this.$emit("update-photo", data.data.photo);
    //     // 提示成功
    //     this.$toast.success("更新成功");
    //   } catch (error) {
    //     this.$toast.fail("更新失败");
    //   }
    // },
  },
};
</script>

<style scoped lang="less">
.update-photo {
  position: relative;
  background-color: #f0f0f0;
  height: 100%;
  .toolbar {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    display: flex;
    justify-content: space-between;
    .cancel,
    .confirm {
      width: 90px;
      height: 90px;
      font-size: 30px;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #000;
    }
  }
}
.img {
  position: absolute;
  top: 300px;
  left: 0;
  max-width: 100%;
}
</style>
